<template>
  <div class="device-list">
    <ul class="global-operation-list" style="margin-top: 20px;">
      <li class="global-operation-left">
        <ul class="global-filter-list">
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">关键字：</h2>
            <el-input v-model="searchForm.keyword" @change="getPost" placeholder="项目名称、品牌" clearable></el-input>
          </li>
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">类型：</h2>
            <el-select v-model="searchForm.otherProjectType" placeholder="请选择类型" clearable>
              <el-option v-for="item in otherProjectTypeList" :key="item.id" :label="item.sysValueName"
                :value="item.id">
              </el-option>
            </el-select>
          </li>

          <li class="global-filter-item">
            <el-button type="primary" class="global-filter-item-search"
              :style="{background: $store.state.theme.theme_color || '#03C192', border: 'none'}"
              @click="rePosts()">搜索</el-button>
          </li>
          <li class="global-filter-item">
            <el-button type="primary" class="global-filter-item-search"
              v-if="operationList.includes('addMediumOtherProject')" @click="addMediumOtherProject">添加</el-button>
          </li>
        </ul>
      </li>
    </ul>
    <div class="global-table-content">
      <div class="global-table">
        <el-table :data="dataList" :header-cell-style="{
            background: '#F6F7FA',
            color: '#333',
            height: '60px',
          }" v-loading="tableLoading" :row-style="{height: '0'}" :cell-style="{padding: '3px'}" max-height="700" border
          v-if="dataList && dataList.length > 0">
          <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
          <el-table-column label="品牌名称" prop="brands" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="项目类型" prop="otherProjectTypeName" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="备注" prop="remark" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="创建时间" prop="createDate" show-overflow-tooltip>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200px">
            <template slot-scope="scope">
              <div>
                <el-button v-if="operationList.includes('editMediumOtherProject')" style="font-size: 14px;" type="text"
                  @click="handleCommand(1, scope.row)">修改</el-button>
              </div>
              <div>
                <el-popconfirm title="确定删除该值吗？" @confirm="handleCommand(2, scope.row)">
                  <el-button slot="reference" v-if="operationList.includes('delMediumOtherProject')"
                    style="font-size: 14px;" type="text">删除</el-button>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="no-data" v-else
          style="height: calc(100vh - 130px - 80px);display: flex;align-items: center;justify-content: center;flex-direction: column">
          <img style="width: 265px;height: 120px;margin-bottom: 32px" src="@/assets/images/tyNoData.png" alt="" />
          <div style="font-size: 16px;color: #A5A9B5">暂无数据~</div>
        </div>
      </div>
      <div class="global-page">
        <div class="global-page-left">
        </div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="pageSizes"
          :page-size="pageSize" :current-page="pageNum" background layout="sizes, total, prev, pager, next"
          :total="total"></el-pagination>
      </div>
    </div>

    <!-- 新增编辑 -->
    <el-dialog :title="formTitle" :visible.sync="addMediumOtherProjectDialogVisible" width="50%"
      :before-close="addMediumOtherProjectHandleClose">
      <div>
        <el-form :model="addMediumOtherProjectForm" :rules="addMediumOtherProjectRules" ref="addMediumOtherProjectForm">
          <el-form-item label="项目名称" prop="projectName" :label-width="formLabelWidth">
            <el-input v-model="addMediumOtherProjectForm.projectName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="otherProjectType" :label-width="formLabelWidth">
            <el-select v-model="addMediumOtherProjectForm.otherProjectType" placeholder="请选择">
              <el-option v-for="(item,index) in otherProjectTypeList" :key="index" :label="item.sysValueName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品牌" prop="brands" :label-width="formLabelWidth">
            <el-input v-model="addMediumOtherProjectForm.brands" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
            <el-input v-model="addMediumOtherProjectForm.remark" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMediumOtherProjectDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMediumOtherProjectSubmit">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import API from "@/api/apiMediumOtherProject";
import APISysLabel from "@/api/apiSysLabel";

export default {
  name: "MediumList",
  props: {
    operationList: Array,
  },
  data() {
    return {
      tokenData: {
        token: localStorage.getItem("mujingtoken")
      },
      searchForm: {
        keyword: "",
        otherProjectType: null,
      },
      tableLoading: false,
      dataList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      pageSizes: [10, 20, 50, 100],
      formLabelWidth: '120px',
      otherProjectTypeList: [],
      addMediumOtherProjectDialogVisible: false,
      addMediumOtherProjectForm: {
        id: null,
        projectName: '',
        otherProjectType: null,
        brands: '',
        remark: '',
      },
      addMediumOtherProjectRules: {
        projectName: { required: true, message: '请输入项目名称', trigger: 'blur' },
        otherProjectType: { required: true, message: '请选择类型', trigger: 'change' },
        brands: { required: true, message: '请输入品牌', trigger: 'blur' },
      },
      formTitle: '新增其他项目',
    };
  },
  activated() {
    this.getSysLabel();
    this.pageNum = 1;
    this.dataList = [];
    this.getPost();
  },
  created() {},
  mounted() {
  },
  methods: {
    handleCommand(type, row) {
        if(type == 1){
            this.addMediumOtherProjectForm = row;
            this.addMediumOtherProjectDialogVisible = true;
            this.formTitle = '修改其他项目';
        } else if(type == 2){
            let params = {
                id: row.id
            }
            API.doDelMediumOtherProject(params).then((res) => {
                if (res.key === 1000) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.rePosts();
                }
                this.$bus.$emit("show-loading", false);
            });
        }
    },
    addMediumOtherProjectSubmit(){
        this.$refs['addMediumOtherProjectForm'].validate((valid) => {
            if (valid) {
                this.$bus.$emit("show-loading", true);
                const params = this.addMediumOtherProjectForm;
                if(params.id){
                    API.doEditMediumOtherProject(params).then((res) => {
                    if (res.key === 1000) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.addMediumOtherProjectDialogVisible = false;
                        this.rePosts();
                    }
                    this.$bus.$emit("show-loading", false);
                    });
                }else{
                    API.doAddMediumOtherProject(params).then((res) => {
                    if (res.key === 1000) {
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.addMediumOtherProjectDialogVisible = false;
                        this.rePosts();
                    }
                    this.$bus.$emit("show-loading", false);
                    });
                }
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    addMediumOtherProjectHandleClose(){
        this.addMediumOtherProjectDialogVisible = false;
    },
    addMediumOtherProject(){
        this.formTitle = "新增其他项目";
        this.addMediumOtherProjectForm = {
          id: null,
          projectName: '',
          otherProjectType: null,
          brands: '',
          remark: '',
        };
        this.addMediumOtherProjectDialogVisible = true;
    },
    formatterTime(time) {
        if (time) {
            return this.$moment(new Date(time)).format("YYYY-MM-DD HH:mm:ss");
        } else {
            return "-";
        }
    },
    // 分页pageSize改变
    handleSizeChange(e) {
        this.pageSize = e;
        this.rePosts();
    },
    // 分页pageNum改变
    handleCurrentChange(e) {
        this.pageNum = e;
        this.getPost();
    },
    // 重新请求
    rePosts() {
        this.pageNum = 1;
        this.dataList = [];
        this.getPost();
    },
    getPost() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      if (this.searchForm.keyword) {
        params.keyword = this.searchForm.keyword;
      }
      if (this.searchForm.otherProjectType) {
        params.otherProjectType = this.searchForm.otherProjectType;
      }
      API.getMediumOtherProjectList(params).then((res) => {
        if (res.key === 1000) {
          this.total = res.result.count;
          res = res.result.list;
          res.forEach(item => {
            if (item.createTime){
              item.createDate = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm");
            }
          })
          this.dataList = res;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    getSysLabel() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        sysLabelIds: '43',
      };
      APISysLabel.getSysLabelValueManageList(params).then((res) => {
        if (res.key === 1000) {
          this.otherProjectTypeList = res.result.data[43];
        }
        this.$bus.$emit("show-loading", false);
      });
    },
  },
};
</script>

<style>
.mask-img-del-size{
  width: 50px;
  text-align: center;
  height: 50px;
  margin: 25px;
}
.mask-img{
  position: absolute;
  margin-top: -100px;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: rgba(101, 101, 101, 0.6);
  color: #ffffff;
  opacity: 0;
  margin-left: -10px;
}
.banner-pic-sub .mask-img:hover{
  opacity: 1;
  cursor: pointer;
}
.el-upload__tip{
  color: #969799;
  margin-top: 0;
  height: 30px;
  line-height: 30px;
}
.avatar-uploader .el-upload .avatar-uploader-icon{
  width: 100px;
  height: 100px;
  line-height: 100px !important;
}
</style>

<style lang="sass">

.avatar-uploader-icon
  font-size: 28px
  color: #8c939d
  width: 178px
  height: 178px
  line-height: 178px !important
  text-align: center
.device-list
  padding-top: 26px
  @include container
.editDialog
  .el-dialog__header
    border-bottom: 1px solid #EFEFEF
    .el-dialog__headerbtn
      font-size: 20px
  .el-dialog__footer
    text-align: left
    margin-left: 120px

</style>
